<template>
  <div class="condition-box">
    <el-select
      style="width: 150px; margin: 5px"
      @change="fieldChange"
      value-key="id"
      v-model="_value.field"
      placeholder="选择表单字段"
    >
      <el-option :key="item.id" v-for="item in _formItems" :value="item.id" :label="item.title"></el-option>
    </el-select>
    <template v-if="_value.field">
      <el-select style="margin: 5px; flex: 1" multiple v-model="_value.compareVal" placeholder="选择表单字段">
        <el-option v-for="item in formItemsValue" :value="item" :label="item"></el-option>
      </el-select>
    </template>
  </div>
</template>

<script>
import useFlowStore from "@/store/modules/gkflow.js";
import compareOptions from "../compare/CompareOptions.js";

const flowStore = useFlowStore();

export default {
  name: "ConditionItem",
  props: {
    formItems: {
      type: Array,
      require: true,
      default: () => []
    },
    modelValue: {
      type: Object,
      require: true,
      default: () => ({})
    }
  },
  computed: {
    formConfig() {
      return flowStore.design.formConfig || {};
    },
    formItemMap() {
      return flowStore.formItemMap;
    },
    _formItems() {
      const ft = ["SelectInput", "MultipleSelect"];
      return this.formItems.filter(item => ft.includes(item.name));
    },
    formItemsValue() {
      return this._formItems.find(item => item.id === this._value.field)?.props?.options || [];
    },
    _value: {
      get() {
        return this.modelValue;
      },
      set(val) {
        this.$emit("input", val);
      }
    }
  },
  data() {
    return {
      compareOptions
    };
  },
  methods: {
    fieldChange() {
      const formItemData = this._formItems.find(item => item.id === this._value.field);
      this._value.compare = formItemData.name === "SelectInput" ? "IN" : "HS";
      this._value.compareVal = [];
      this._value.ruleFiledName = formItemData.title;
      this._value.fieldType = formItemData.name;
    }
  }
};
</script>
<style scoped lang="scss">
.condition-box {
  display: flex;
}
</style>
